<template>
  <div class="h-card">
    <slot name="icon"></slot>
    <div class="info">
      <h5>{{data.title}}</h5>
      <p>{{data.number| threenum}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    data:{
      type:Object,
      default:()=>{
        return {
          title:'',
          number:0
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
.h-card{
  display:flex;
  width: 200px;
  height: 100px;
  background-color: #fff;
  align-items: center;
 text-align: center;

}
i{
  flex:1;
  font-size:40px;
  color:orange
}

.info{
  flex:1;
  h5{
    color:#333
  }
  p{
margin-top: 5px;
color:#666;
font-weight: 400;
  }
}
</style>